import React from 'react';
import { NavLink } from 'umi';
import { Layout, Menu, Avatar } from 'antd';
import Icon  from '@ant-design/icons';
import layoutStyle from './layout.css';
import './layout.css';
import { user } from '../config/config';
const { SubMenu } = Menu;
const { Header, Sider, Content } = Layout;


class SiderDemo extends React.Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    return (
      <Layout className={layoutStyle.layout}>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className={layoutStyle.logo}>
            <img
              src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-favicon.png"
              alt=""
            />
            {this.state.collapsed ? null : <span>管理后台</span>}
          </div>
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <NavLink to="/home">
                <Icon type="account-book" />
                <span>工作台</span>
              </NavLink>
            </Menu.Item>
            <SubMenu
              key="sub1"
              title={
                <span>
                  <Icon type="account-book" />
                  <span>管理后台</span>
                </span>
              }
            >
              <Menu.Item key="2">
                <NavLink to="/articles">
                  <Icon type="pie-chart" />
                  <span>所有文章</span>
                </NavLink>
              </Menu.Item>
              <Menu.Item key="3">
                <NavLink to="/articles/category">
                  <Icon type="appstore" />
                  <span>分类管理</span>
                </NavLink>
              </Menu.Item>
              <Menu.Item key="4">
                <NavLink to="/articles/tags">
                  <Icon type="api" />
                  <span>标签管理</span>
                </NavLink>
              </Menu.Item>
            </SubMenu>
            <Menu.Item key="5">
              <NavLink to="/home/PageManagement/PageManagement">
                <Icon type="alert" />
                <span>页面管理</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="6">
              <NavLink to="/home/KnowledgeBrochure/KnowledgeBrochure">
                <Icon type="bell" />
                <span>知识小册</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="7">
              <NavLink to="/home/PostersManagement/PostersManagement">
                <Icon type="book" />
                <span>海报管理</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="8">
              <NavLink to="/home/CommentsOnTheManagement/CommentsOnTheManagement">
                <Icon type="bug" />
                <span>评论管理</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="9">
              <NavLink to="/home/EmailManagement/EmailManagement">  
                <Icon type="bulb" />
                <span>邮件管理</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="10">
              <NavLink to="/home/FileManagement/FileManagement">
                <Icon type="calculator" />
                <span>文件管理</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="11">
              <NavLink to="/home/SearchRecords/SearchRecords">
                <Icon type="build" />
                <span>搜索记录</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="12">
              <NavLink to="/home/AccessStatistics/AccessStatistics">
                <Icon type="calendar" />
                <span>访问统计</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="13">
              <NavLink to="/home/UserManagement/UserManagement">
                <Icon type="camera" />
                <span>用户管理</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="14">
              <NavLink to="/home/SystemSettings/SystemSettings">
                <Icon type="car" />
                <span>系统设置</span>
              </NavLink>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout style={{ width: '100%' }}>
          <Header
            style={{
              background: '#fff',
              padding: '0 1rem',
              alignItems: 'center',
              width: '100%',
              display: 'block',
            }}
          >
            <Icon
              className="trigger"
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
              style={{ float: 'left', lineHeight: '4rem' }}
            />
            <div className={layoutStyle.headerrigin}>
              {user ? (
                JSON.parse(user).avatar ? (
                  <img src={JSON.parse(user).avatar} alt="" />
                ) : (
                  <Avatar icon="user" />
                )
              ) : null}
              <span style={{ paddingLeft: '1rem' }}>Hi!{user ? JSON.parse(user).name : null}</span>
            </div>
          </Header>
          <Content
            style={{
              background: '#fff',
              minHeight: 280,
            }}
          >
            {this.props.children}
          </Content>
        </Layout>
      </Layout>
    );
  }
}

export default SiderDemo;
